<template>
    <div class="searchItem">
        <div class="title">
            <div class="back" @click="router.go(-1)"></div>
            <p>搜索结果</p>
            <div></div>
        </div>
        <div class="titleList">
            <van-tabs v-model:active="active" animated>
                <van-tab :title="'综合'">
                    <ul class="item">
                        <li class="item-list" v-for="(item, index) in hostList.content" :key="index"
                            @click="goHotelDetails(item.commonCode, item.fullStatus)">
                            <div class="item-img">
                                <img class="auto-img" :src="item.image" alt="">
                            </div>
                            <div class="item-host">
                                <p>{{ item.shopName }}</p>
                                <div class="text">{{ item.shopType }}</div>
                                <div class="text">{{ item.address }}</div>
                                <ul>
                                    <li v-for="(value, index) in item.lableList" :key="index">{{ value }}</li>
                                </ul>
                                <div class="item-price">
                                    <div></div>
                                    <p> <span>￥</span> 299 <span>起</span> </p>
                                </div>
                            </div>
                            <div class="fullStatus-bg" @click="alerthotel" v-if="(item.fullStatus == 2)">
                                <div class="fullStatus"></div>
                            </div>
                        </li>
                    </ul>
                </van-tab>
                <van-tab :title="'网咖'">
                    <ul class="item">
                        <li class="item-list" v-for="(item, index) in wkList.content" :key="index">
                            <div class="item-img">
                                <img class="auto-img" :src="item.image" alt="">
                            </div>
                            <div class="item-host">
                                <p>{{ item.shopName }}</p>
                                <div class="text">{{ item.shopType }}</div>
                                <div class="text">{{ item.address }}</div>
                                <ul>
                                    <li v-for="(value, index) in item.lableList" :key="index">{{ value }}</li>
                                </ul>
                                <div class="item-price">
                                    <div></div>
                                    <p> <span>￥</span> 299 <span>起</span> </p>
                                </div>
                            </div>
                        </li>
                    </ul>
                </van-tab>
                <van-tab :title="'电竞酒店'">
                    <ul class="item">
                        <li class="item-list" v-for="(item, index) in djjdList.content" :key="index">
                            <div class="item-img">
                                <img class="auto-img" :src="item.image" alt="">
                            </div>
                            <div class="item-host">
                                <p>{{ item.shopName }}</p>
                                <div class="text">{{ item.shopType }}</div>
                                <div class="text">{{ item.address }}</div>
                                <ul>
                                    <li v-for="(value, index) in item.lableList" :key="index">{{ value }}</li>
                                </ul>
                                <div class="item-price">
                                    <div></div>
                                    <p> <span>￥</span> 299 <span>起</span> </p>
                                </div>
                            </div>
                        </li>
                    </ul>
                </van-tab>
            </van-tabs>
        </div>
    </div>
</template>

<script setup lang="ts">
import { reactive, onMounted, ref, computed, watch } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { getSearchItem, getSearchKey, getHotelDetails } from '@/api/api'
import type { searchRelatedType, nameTpye } from '@/tsList/homeFunts'
import { showLoadingToast } from 'vant';

const router = useRouter()
const route = useRoute()
const active = ref(0)

let kk = JSON.parse(JSON.stringify(route.query.searchType))
let gg = JSON.parse(JSON.stringify(route.query.keyword))

const hostList = reactive<{ content: Array<searchRelatedType> }>({
    content: []
})

const wkList = reactive<{ content: Array<searchRelatedType> }>({
    content: []
})

const djjdList = reactive<{ content: Array<searchRelatedType> }>({
    content: []
})

const searchRelated = reactive<{ content: Array<searchRelatedType> }>({
    content: []
})

const HotelDetailsList = reactive({

})
function handleChange(searchText: string) {
    if (searchText) {
        getSearchKey(searchText).then((res) => {
            searchRelated.content = res.data.content
        })
    }
}

function alerthotel() {
    showLoadingToast({
        message: '该房间已订满,请重新选择',
        forbidClick: true,
    });
}

function goHotelDetails(commonCode: string, item: number) {
    if (item == 2) {
        return
    } else {
        router.push({
            //传递参数使用query的话，指定path或者name都行，但使用params的话，只能使用name指定 
            path: '/HotelDetails',
            query: {
                commonCode: commonCode,
            }
        })
    }

}

onMounted(() => {
    getSearchItem(gg, 'ALL').then((res) => {
        hostList.content = res.data.content
        console.log('hostList.content', hostList.content);

    })
    getSearchItem(gg, 'WYWK').then((res) => {
        wkList.content = res.data.content
    })
    getSearchItem(gg, 'DJJD').then((res) => {
        djjdList.content = res.data.content
    })
    if (kk && gg) {
        getSearchItem(gg, kk).then((res) => {
            // console.log('点击搜索拿到的数据', res);
            hostList.content = res.data.content
        })
    }
})

</script>

<style lang="less" scoped>
.auto-img {
    width: 100%;
    height: 100%;
    display: block;
}

.searchItem {
    background-color: white;
    min-height: 100vh;

    .title {
        display: flex;
        align-items: center;
        padding: 10px 10px;
        justify-content: space-between;

        .back {
            width: 20px;
            height: 20px;
            background-image: url('@/assets/icon/tme_ad_video_top_back.png');
            background-size: cover;
        }

        p {
            font-size: 16px;
            font-weight: 600;
        }
    }

    .item {
        width: 100%;
        min-height: 100vh;

        .item-list {
            margin: 10px 0;
            display: flex;
            padding-left: 10px;
            border-bottom: 1px solid #ddd;
            position: relative;

            .item-img {
                width: 85px;
                height: 85px;
                background-color: black;
                border-radius: 10px;
                overflow: hidden;
            }

            .item-host {
                flex: 1;
                font-size: 12px;
                color: #858585;
                padding: 0 10px;


                p {
                    color: black;
                    font-size: 13px;
                    font-weight: 600;
                }

                .text {
                    width: 234px;
                    transform: scaleX(.9);
                    transform-origin: 0 0;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                }

                ul {
                    display: flex;
                    flex-wrap: wrap;
                    width: 100%;
                    transform: scale(.8);
                    transform-origin: 0 0;
                    height: 20px;
                    overflow: hidden;

                    li {
                        border: 1px solid #ddd;
                        padding: 0 2px;
                        color: black;
                        border-radius: 3px;
                        margin-right: 2px;
                    }
                }

                .item-price {
                    display: flex;
                    justify-content: space-between;
                    align-items: center;

                    p {
                        font-size: 15px;
                        font-weight: 600;
                        color: #f07b22;

                        span {
                            font-size: 12px;
                            font-weight: 400;
                        }

                        span:nth-child(2) {
                            color: #858585;
                        }
                    }
                }
            }

            .fullStatus-bg {
                position: absolute;
                top: 0;
                bottom: 0;
                left: 0;
                right: 0;
                background-color: rgba(224, 224, 224, 0.4);
                z-index: 999;

                .fullStatus {
                    width: 60px;
                    height: 60px;
                    position: absolute;
                    bottom: 10px;
                    right: 10px;
                    background-image: url('@/assets/icon/vq.png');
                    background-size: cover;
                }
            }

        }
    }
}
</style>